<template>
  <div class="video-page">
    <div class="mainbox">
      <img src="../assets/videoBg.png" />
    </div>
    <div class="video-left">
      <div class="video-title">
        <span>{{videoInfo.title}}</span>
      </div>
      <div class="video-date">
        <span>{{videoInfo.date | toTime}}</span>
      </div>
      <div class="video-player">
        <player :url="url" :videoId="videoId"></player>
      </div>

      <!--点赞收藏-->
      <div class="zan">
        <span class="zan-icon">
          <i
            class="iconfont icon-like-b"
            :id="isLike ? 'bottom-icon-activation':'bottom-icon'"
            title="点赞"
            @click="like"
          ></i>
          <span style="margin-left:10px">{{videoInfo.like_count}}</span>
        </span>
        <span class="zan-icon">
          <i
            class="iconfont icon-collection-b"
            :id="isFavorites ? 'bottom-icon-activation':'bottom-icon'"
            title="收藏"
            @click="favorites"
          ></i>
          <span style="margin-left:10px">{{videoInfo.favorites}}</span>
        </span>
      </div>
      <hr />
      <!--简介-->
      <div class="info">
        <div ref="infoText">{{videoInfo.content}}</div>
        <el-button class="more" type="text" @click="toggle">{{ more ? '展开更多' : '收起' }}</el-button>
      </div>
      <div class="write-c">
        <!--头像-->
        <div class="face-c">
          <el-avatar v-if="userInfo" :size="50" :src="userInfo.Face | toFaceUrl">
            <el-avatar icon="el-icon-user-solid" :size="50"></el-avatar>
          </el-avatar>
          <el-avatar v-else icon="el-icon-user-solid" :size="50"></el-avatar>
        </div>
        <!--发表评论-->
        <el-input
          class="input-c"
          type="textarea"
          v-model="releaseForm.text"
          rows="3"
          placeholder="在这里写点什么吧！"
        ></el-input>
        <v-btn v-if="!userInfo" class="btn-c" small disabled>未登录</v-btn>
        <v-btn v-else class="btn-c" small color="#67C23A" dark @click="publish">发表</v-btn>
      </div>
      <el-divider></el-divider>
      <div v-if="count == 0" style="padding-top:10px;padding-bottom:20px;text-align:center">
        <span>还没有人评论，来发条评论吧~</span>
      </div>
      <comment-list v-else @reply="replyComment" :list="commentList"></comment-list>
      <div style="text-align:center">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="page"
          :total="count"
          :page-size="page_size"
          :hide-on-single-page="shouPagination"
          @current-change="handleCurrent"
        ></el-pagination>
      </div>
    </div>
    <div class="video-right">
      <el-card class="video-author" v-if="showCard">
        <!--头像-->
        <div class="video-face">
          <el-avatar :size="60" :src="face">
            <el-avatar icon="el-icon-user-solid" :size="60"></el-avatar>
          </el-avatar>
        </div>
        <!--关注按钮-->
        <v-btn v-if="!userInfo" class="follow-btn" small disabled>未登录</v-btn>
        <v-btn
          v-else-if="isAttention"
          class="follow-btn"
          small
          color="#67C23A"
          dark
          @click="togAtt"
        >已关注</v-btn>
        <v-btn v-else class="follow-btn" small color="#F56C6C" dark @click="togAtt">关注</v-btn>
        <!--昵称和个签-->
        <span class="video-font-name" @click="goAuthorSpace(authorInfo.uid)">{{authorInfo.name}}</span>
        <span class="video-font-sign">{{authorInfo.sign}}</span>
      </el-card>
    </div>
  </div>
</template>

<script>
import wPlayer from "@/components/wPlayer";
import { videoUrl, faceUrl, toFaceUrl } from "@/utils/url";
import {
  getVideoInfo,
  likeInfo,
  like,
  dislike,
  favorites,
  unfavorites,
} from "@/api/videoService";
import storageService from "@/utils/storageService";
import { getIsFollow, follow, unsubscribe } from "@/api/relations";
import { getCommentList, release } from "@/api/commentService";
import comment from "@/components/commentList";

export default {
  data() {
    return {
      videoInfo: [],
      authorInfo: [],
      commentList: [],
      page: "", //分页
      page_size: 5,
      count: 0,
      more: true, //展开简介
      showCard: false, //显示作者卡片
      isFollow: false, //是否关注
      isLike: false, //是否点赞
      isFavorites: false, //是否收藏
      vid: "",
      videoId: Number,
      url: "",
      shouPagination: true, //隐藏分页
      formId: {
        id: "",
      },
      //评论回复表单
      releaseForm: {
        vid: "",
        text: "",
        lastId: 0,
        replyUid: 0,
        replyName: "",
      },
    };
  },
  components: {
    player: wPlayer,
    "comment-list": comment,
  },
  methods: {
    init() {
      getVideoInfo(this.vid).then((res) => {
        this.videoInfo = res.data.data.data;
        this.authorInfo = res.data.data.data.author;
        this.showCard = true;
        //获取关注信息
        getIsFollow(this.$store.state.userInfo.Uid, this.authorInfo.uid).then(
          (res) => {
            if (res.data.code === 200) {
              this.isFollow = true;
            }
          }
        );
      });
      this.url = videoUrl + this.vid;
      //获取点赞收藏信息
      if (this.$store.state.userInfo.Uid) {
        likeInfo(this.vid).then((res) => {
          this.isFavorites = res.data.data.favorites;
          this.isLike = res.data.data.like;
        });
      }
    },
    toggle() {
      if (this.more) {
        this.$refs.infoText.style.height = "auto";
      } else {
        this.$refs.infoText.style.height = "2rem";
      }
      this.more = !this.more;
    },
    togAtt() {
      if (this.isFollow === false) {
        //关注
        this.formId.id = this.authorInfo.uid;
        follow(this.formId)
          .then((res) => {
            if (res.data.code === 200) {
              this.isFollow = true;
              this.$message.success("关注成功");
            }
          })
          .catch((err) => {
            this.$message.error(err.response.data.msg);
          });
      } else {
        //取关
        this.formId.id = this.authorInfo.uid;
        this.$confirm("是否取消关注?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          unsubscribe(this.formId)
            .then((res) => {
              if (res.data.code === 200) {
                this.isFollow = false;
                this.$message.success("取消关注");
              }
            })
            .catch((err) => {
              this.$message.error(err.response.data.msg);
            });
        });
      }
    },
    _getCommentList() {
      //获取评论
      getCommentList(this.vid, this.page, this.page_size).then((res) => {
        if (res.data.code === 200) {
          this.commentList = res.data.data.data;
          if (this.count == 0) {
            //只有查询第一页才返回总数
            this.count = res.data.data.count;
            if (this.count > this.page_size) {
              this.shouPagination = false;
            }
          }
        } else {
          this.$message.error("评论获取失败");
        }
      });
    },
    handleCurrent(page) {
      this.page = page;
      this._getCommentList();
    },
    publish() {
      if (!this.releaseForm.text.trim()) {
        this.releaseForm.text = "";
        this.releaseForm.lastId = 0;
        this.releaseForm.replyUid = 0;
        return this.$message.error("请输入内容");
      }
      release(this.releaseForm)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("评论成功");
            this.page = Math.ceil((this.count + 1) / this.page_size);
            this._getCommentList();
          } else {
            this.$message.error("评论失败");
          }
        })
        .catch((err) => {
          this.$message.error(err.response.data.msg);
        });
      this.releaseForm.text = "";
      this.releaseForm.lastId = "";
    },
    replyComment(reply) {
      //回复
      this.releaseForm.text = reply.content;
      this.releaseForm.lastId = reply.cid;
      this.releaseForm.replyName = reply.replyName;
      this.releaseForm.replyUid = reply.replyUid;
      release(this.releaseForm)
        .then((res) => {
          if (res.data.code === 200) {
            this.releaseForm.text = "";
            this.$message.success("回复成功");
            this._getCommentList();
          } else {
            this.$message.error("回复失败");
          }
        })
        .catch((err) => {
          this.$message.error(err.response.data.msg);
        });
      this.releaseForm.text = "";
      this.releaseForm.lastId = 0;
    },
    like() {
      this.formId.id = Number(this.vid);
      if (this.isLike) {
        dislike(this.formId)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success("取消点赞");
              this.isLike = false;
              this.videoInfo.like_count--;
            }
          })
          .catch((err) => {
            this.$message.error(err.response.data.msg);
          });
      } else {
        like(this.formId)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success("点赞成功");
              this.isLike = true;
              this.videoInfo.like_count++;
            }
          })
          .catch((err) => {
            this.$message.error(err.response.data.msg);
          });
      }
    },
    favorites() {
      this.formId.id = Number(this.vid);
      if (this.isFavorites) {
        unfavorites(this.formId)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success("取消收藏");
              this.isFavorites = false;
              this.videoInfo.favorites--;
            }
          })
          .catch((err) => {
            this.$message.error(err.response.data.msg);
          });
      } else {
        favorites(this.formId)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success("收藏成功");
              this.isFavorites = true;
              this.videoInfo.favorites++;
            }
          })
          .catch((err) => {
            this.$message.error(err.response.data.msg);
          });
      }
    },
    goAuthorSpace(id) {
      this.$router.push({ name: "userVideo", params: { uid: id } });
    },
  },
  computed: {
    userInfo() {
      if (storageService.get(storageService.USER_TOKEN)) {
        return this.$store.state.userInfo;
      } else {
        return null;
      }
    },
    face() {
      if (this.authorInfo) {
        return faceUrl + this.authorInfo.face;
      } else {
        return null;
      }
    },
    isAttention() {
      return this.isFollow;
    },
  },
  created() {
    this.vid = this.$route.params.vid;
    this.videoId = Number(this.vid);
    this.releaseForm.vid = parseInt(this.vid);
    this.page = 1;
    this.init();
    this._getCommentList();
  },
  filters: {
    toFaceUrl(name) {
      return toFaceUrl(name);
    },
    toTime(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return year + "-" + month + "-" + day + "  " + hours + ":" + minutes;
    },
  },
};
</script>

<style>
.video-page {
  display: flex;
  padding-left: 2%;
  margin: auto;
  width: 85%;
  min-width: 1200px;
  background-color: rgba(255, 255, 255, 0.8);
}

.mainbox {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

.mainbox > img {
  width: 100%;
  height: 100%;
  border: 0px;
}

.video-left {
  margin-top: 40px;
  width: 64%;
  min-width: 800px;
}
.video-title {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24px;
}

.video-date {
  color: #999999;
}

.video-player {
  width: 100%;
  max-height: 560px;
}

.player {
  width: 100%;
  height: 100%;
}

/**点赞收藏 */
.zan {
  padding: 1rem 0;
  width: 100%;
}

#bottom-icon {
  font-size: 30px;
  color: #808080;
  cursor: pointer;
}

#bottom-icon-activation {
  font-size: 30px;
  color: #00a1d6;
  cursor: pointer;
}

.zan-icon {
  margin-right: 2rem;
  cursor: pointer;
  display: inline-block;
}

/** 评论输入框 */
.write-c {
  display: flex;
}

.face-c {
  padding-top: 15px;
}

.input-c {
  width: 80%;
  padding-left: 20px;
  padding-top: 10px;
}

.btn-c {
  width: 8%;
  margin: auto;
}

.video-author {
  position: relative;
  width: 100%;
  margin-top: 40px;
}
.video-face {
  bottom: 20px;
  left: 15px;
}

.video-font-name {
  position: absolute;
  bottom: 55px;
  left: 100px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}

.video-font-sign {
  position: absolute;
  bottom: 30px;
  left: 100px;
  font-size: 14px;
  color: #2e2e2e;
}

.follow-btn {
  position: absolute;
  margin-left: 230px;
  margin-top: -45px;
}

.video-right {
  margin: 50px auto;
  min-width: 350px;
}
</style>